<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

</head>
<body>

<div class="container mt-3" id="app">
	<form action="">
	  <div class="mb-3 mt-3">
		<label for="username" class="form-label">Username:</label>
		<input type="text" class="form-control" v-model="obj.username" placeholder="Enter username" name="username">
	  </div>
	  <div class="mb-3">
		<label for="pwd" class="form-label">Password:</label>
		<input type="password" class="form-control" v-model="obj.password" placeholder="Enter password" name="password">
	  </div>
	  <button type="button" class="btn btn-primary" @click="go">Submit</button>
	</form>
</div>

</body>

<script>
new Vue({

    el:"#app",
    data:{
            obj: {
                username: "",
                password: "",
            },
    },
    methods:{

        go(){
            console.log(111)
            let url = "http://127.0.0.1:8081/login?username="+this.obj.username+"111&password="+this.obj.password
                    axios
                        .get(url)
                        .then(response => {
                            console.log("ok")
                        })
                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
        }

    }

})
    


</script>



</html>